<template>
    <section class="point-item">
      <div class="inner clearfix">
         <div class="left-side">
                <p class="title">
                    <span class="original">{{info.name}}</span>
                    <span class="from">{{info.from}}</span>
                </p>
                <p class="time">{{info.time}}</p>
         </div>
         <div class="right-side">
             <img src="./img/coin.png" alt="img">积分： <span class="point">+{{info.point}}</span>
         </div>
      </div>
    </section>
</template>

<script>
export default {
  name: 'PointItem',
  props: {
      info: {
          type: Object,
          required: true
      }
  }
}
</script>

<style scoped lang="less">
  @import "../../style/style.less";
  .point-item {
      .inner {
          padding: 20px 0;
          border-bottom: 1px solid @border-color;
        .left-side {
            float: left;
            .title {
                font-size: 16px;
                color: #666;
                .from {
                    margin-left: 6px;
                  color: @theme-color-dark;
                }
            }
            .time {
                font-size: 14px;
                color: #999;
            }
        }
        .right-side {
            float: right;
            font-size: 14px;
            height: 45px;
            line-height: 45px;
            img {
                display: inline-block;
                vertical-align: middle;
                margin-right: 6px;
            }
            .point {
                color: @theme-color-dark;
            }
        }
      }
  }

</style>
